<template>
	<div style="height: 100%;">
		<div class="weui-tab">
			<div class="weui-tab__panel">
				<div id="studyCenterFlag" class="weui-tab__bd-item" style="display: none;">
					<studyCenter ></studyCenter>
				</div>
				<div id="classCenterFlag" class="weui-tab__bd-item" style="display: none;">
					<classCenter ></classCenter>
				</div>
				<div id="userCenterFlag" class="weui-tab__bd-item" style="display: none;">
					<userCenter ></userCenter>
				</div>
			</div>
			<div class="weui-tabbar">
				<div class="weui-tabbar__item mainItem"  ref="studyCenterFlag">
					<div style="display: inline-block; position: relative;">
						<img src="../../assets/img/wx/xuexi.png" alt="" class="weui-tabbar__icon">
						<span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
					</div>
					<p class="weui-tabbar__label">学习中心</p>
				</div>
				<div class="weui-tabbar__item mainItem" ref="classCenterFlag">
					<img src="../../assets/img/wx/xuanke.png" alt="" class="weui-tabbar__icon">
					<p class="weui-tabbar__label">课程中心</p>
				</div>

				<div class="weui-tabbar__item mainItem " ref="userCenterFlag">
					<img src="../../assets/img/wx/user.png" alt="" class="weui-tabbar__icon">
					<p class="weui-tabbar__label">个人中心</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import userCenter from '@/page/wxUser/userCenter'
	import studyCenter from '@/page/wxUser/studyCenter'
	import classCenter from '@/page/wxUser/classCenter'
	import {
		getToken,
	} from '@/utils/auth'
	import constant from '@/utils/constant.js' //引入
	import {
		formatUrlParams
	} from '@/utils/utils.js' //引入
	import apis from '@/utils/apis.js'
	import {
		getOauth2UserInfo,
		getwxUserAuthroize
	} from '@/apis/wx/weixinJs.js'
	import uwLoadJs from '@/utils/uwLoad'
	export default {
		components: {
			userCenter,
			studyCenter,
			classCenter
		},
		data() {
			return {
				pageTitle: "",
				componKey:0,
				componKey2:1,
				componKey3:2,
			}
		},
		created() {
			debugger
			//判断登录
			let token = localStorage.getItem(constant.WX_TOKEN);
			if (token) {
				let userinfo = JSON.parse(localStorage.getItem(token));
				let urlparam = formatUrlParams();
				let code = null;
				if (urlparam && urlparam['code']) {
					code = urlparam['code'];
					//授权后跳过来的,根据code获取用户信息,填充数据库数据，更新页面缓存用户信息
					let params = {
						code: code,
						account: userinfo.userInfo.wxUser.wxAccount
					}
					let res = uwLoadJs.ajaxRequest(params, apis.getOauth2UserInfo);
					if (res.resultCode == constant.SUCCESS && res.data && res.data != null) {
						let data = res.data;
						localStorage.clear();
						localStorage.setItem(constant.WX_TOKEN, token)
						localStorage.setItem(constant.TOKEN, token)
						localStorage.setItem(token, JSON.stringify(data))
						localStorage.setItem('wx_userInfo',JSON.stringify(data.userInfo) )
					}
				} else {
					//是否授权
					if (!userinfo.userInfo.wxUser.openid) {
						//请求授权
						getwxUserAuthroize(this,"?userCenterFlag=true");
					}
				}
			} else {
				this.$router.replace("/wx/user/wxLogin");
			}
		},
		mounted() {
			this.initControl();
			//根据点击或者授权跳转，页面初始化控制vue子控件显示，以及底部的颜色
			let flagMap = this.$route.params; //内部路由跳转携带的params
			let urlparam = formatUrlParams(); //获取授权链接时携带的
			let k;
			if (JSON.stringify(flagMap) !="{}") {
				for (var key in flagMap) {
					k = key;
					break;
				}
			} else if (JSON.stringify(urlparam) !="{}") {
				for (var key in urlparam) {
					if(key.indexOf("Flag")>=0){
						k = key;
						break;
					}
				}
			}

			if (k) {
				//设置主界面隐藏显示
				let dom = $('#' + k);
				dom.show();
				dom.siblings().hide()
			
				//设置底部样式
				let refdom = this.$refs[k];
				let oldName = refdom.className;
				refdom.className = oldName + " " + "weui-bar__item_on";

			} else {
				//没获取到，直接转到个人信息
				let dom = $('#userCenterFlag');
				dom.show();
				dom.siblings().hide()
			
				// //设置底部样式
				let refdom = this.$refs["userCenterFlag"];
				let oldName = refdom.className;
				refdom.className = oldName + " " + "weui-bar__item_on";
			}
		},
		methods: {
			//控制底部切换展示不同vue
			initControl() {
				let _that = this;
				$('.mainItem').on('click', function() {
					$(this).addClass("weui-bar__item_on");
					$(this).siblings().removeClass('weui-bar__item_on');
					var index = $(this).index();
					$('.weui-tab__bd-item').eq(index).show().siblings().hide();
				})
			}
		}
	}
</script>

<style>
</style>
